<!doctype html>
<html>
<head>
<meta charset="utf-8" lang="zh">
<title>Download Site</title>
<script>
	// 定义一个函数以更新年份
    function updateDatetime() {
      var now = new Date();
      var year = now.getFullYear();
	  var month = (now.getMonth() + 1).toString().padStart(2, '0');
      var day = now.getDate().toString().padStart(2, '0');
      var hours = now.getHours().toString().padStart(2, '0');
      var minutes = now.getMinutes().toString().padStart(2, '0');
	  var datetimeString = year + "/" + month + "/" + day + " " + hours + ":" + minutes;
      document.getElementById("datetime").textContent = datetimeString;
    }

    // 每秒调用一次函数更新年份
    setInterval(updateDatetime, 1000);
	
	// 定义一个函数以更新年份
    function updateYear() {
      var currentYear = new Date().getFullYear();
      document.getElementById("year").textContent = currentYear;
    }

    // 每秒调用一次函数更新年份
    setInterval(updateYear, 1000);
</script>
<style type="text/css">
	body {
		background-image: url("./img/bg.png");
		background-attachment: fixed;
	}
	
	h1 {
		font-size: 40px;
		text-align: center;
	}
	
	hr {
  		border: none;
  		border-top: 1px solid black;
  		width: 100%;
	}
	
    .marquee {
		white-space: nowrap;
        overflow: hidden;
        width: 100%;
    }
	
	.marquee span {
        display: inline-block;
  		padding-left: 100%;
  		animation: marquee 40s linear infinite;
		color: #000000;
	}

	@keyframes marquee {
  		from   { transform: translate(0, 0); }
  		to { transform: translate(-100%, 0); }
	}

	a {
    	text-decoration: none;
  	}

  	a:hover {
    	text-decoration: none;
  	}
	
	.container {
		text-align: center;
	}
	
	.login-button {
    	display: inline-block;
    	padding: 6px 18px;
    	font-size: 16px;
    	color: #fff;
    	background-color: #007bff;
    	border: none;
    	border-radius: 5px;
    	cursor: pointer;
    	transition: background-color 0.3s ease-in-out;
		text-align: center;
  	}

  	.login-button:hover {
    	background-color: #0069d9;
  	}
	
	.logup-button {
    	display: inline-block;
    	padding: 6px 18px;
    	font-size: 16px;
    	color: #fff;
    	background-color: #FF5A97;
    	border: none;
    	border-radius: 5px;
    	cursor: pointer;
    	transition: background-color 0.3s ease-in-out;
		text-align: center;
  	}

  	.logup-button:hover {
    	background-color: #D5288E;
  	}
	
	table {
		width: 100%;
	}
	
	td {
		text-align: center;
		padding: 10px;
		font-weight: bold;
	}
	
	.footer {
  		position: fixed;
  		left: 0;
  		bottom: 0;
  		width: 100%;
  		height: 25px;
  		background-color: #333;
  		color: #fff;
  		text-align: center;
  		padding: 10px;
	}
</style>
</head>

<body style="background-size: cover;">
<h1 style="text-shadow: 2px 2px 2px #000;">Learning Knowledge Website</h1>
<p id="datetime" style="text-align: end;"></p>
<hr>
<div class="marquee">
	<span>This website is used to create a learning environment for scholars. We have many learning materials save on this site. You can get these files by downloading them.</span>
</div>
<hr>
<div class="container">
  <button type="button" class="login-button" onClick="window.location.href='login.html'">登&nbsp;&nbsp;&nbsp;录</button>
  &nbsp;&nbsp;&nbsp;
  <button type="button" class="logup-button" onClick="window.location.href='login.html'">注&nbsp;&nbsp;&nbsp;册</button>
</div>
<table>
	<tr>
	  <td colspan="2" style="font-size: 30px;"></td>
	</tr>
</table>
<table>
  <tr> </tr>
  <tr>
    <td>
      
    </td>
    <td>
      
    </td>
    </tr>
</table>
<div class="footer">Copyright by &copy; <span id="year"></span> Jinxinxi</div>

</body>
</html>
